<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="../image/pic.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../html/footer.html">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <title>登录注册</title>
    <style>
        .logo1{width: 1090px;margin: 0 auto;padding: 15px 0;}
        .allbody{width: 1090px;height: 500px; margin:0 auto;padding:0 0 200px 0; position: relative;background-color: #fcf9f9;}
        .container{width: 400px;position: absolute;top: 160px;right: 40px;}
        .allbody .sign{position: absolute;top: 180px;left: 40px;}
        #ok{margin-left: 20px;}
        iframe{
            display: block;
            width: 100%;
            height: 172px;
        }
    </style>
</head>
<body>
    <div class="logo1">
        <img src="../image/logo.png" alt="">
    </div>
    <div class="allbody">
        <div class="sign">
            <img src="../image/sign.png" alt="">
        </div>
        <div class="container">
            <div class="panel panel-primary" id="register">
                <div class="panel-heading" style="background-color: #e42542;">注册</div>
                <div class="panel-body">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" class="form-control">
                    </div>
                    <a href="#">马上登陆</a>
                    <input type="checkbox" id="ok"><label for="ok">30天内免登陆 </label>    
                    <button id="btn1" class="btn btn-danger pull-right">注册</button>
                </div>
            </div>
        </div>
    </div>
    
    <iframe  scrolling="no" src="footer.html" frameborder="0"></iframe>
    <script src="../js/jquery.min.js"></script>
    <script>

         // 设置cookie的通用函数
        
         function setCookie(key,value,expires){
            if(typeof expires === "object"){
                document.cookie = `${key}=${value};expires=${expires}`
            }
            if(typeof expires === "number"){
                let date = new Date();
                date.setDate(date.getDate() + expires);
                document.cookie = `${key}=${value};expires=${date}`
            }
        }
        // 读取cookie的通用函数
        function getCookie(k){
            let result = {}
            let arr = document.cookie.split("; ");
            arr.forEach(item=>{
                let key = item.split("=")[0];
                let value = item.split("=")[1];
                result[key] = value;
            })

            if(!k){
                return result;
            }
            return result[k];
        }

        //注册
         $("#btn1").click(function(){
            $.ajax({
                url:`http://127.0.0.1:82/regi`,
                data:{
                    username:$("#username").val(),
                    password:$("#password").val()
                },
                success(data){
                    if(data==="success"){
                        alert("注册成功，请输入已有账号登录")       
                    }else{
                        if(data === "repeat"){
							alert("该用户名已存在")
						}
						else{
							alert("注册失败")
						}
                    }
                }
            })
        });

         // 登录
         let oa = document.getElementsByTagName("a")[0];
        oa.onclick = function(){    
            if($("input").eq(0).val()==="" || $("input").eq(1).val()===""){   
                return;
            }else{
                $.ajax({
                    url:`http://127.0.0.1:82/sign`,
                    data:{
                        username:$("#username").val(),
                        password:$("#password").val()
                    },
                    success(data){  
                        if(data==="error"){
                            alert(1)
                        }                                      
                        sessionStorage.setItem("username",$("#username").val());                            
                        sessionStorage.setItem("password",$("#password").val());                            
                        if(document.getElementById("ok").checked){
                            setCookie("username",$("#username").val(),30);
                            setCookie("password",$("#password").val(),30);
                        }
                        
                        location.href = `http://127.0.0.1:82/html/index.html`
                    }
                })
            } 
        }
        // 回车登录
        $("body").keydown(function(event){
            if(event.keyCode===13){
                oa.click()
            }
        })

        //30天免登陆
        if(getCookie("username")&&getCookie("password")){
            $("#username").val(getCookie("username"));
            $("#password").val(getCookie("password"));
        }
        
    </script>
</body>
</html>
<!-- 
    经常把val(),当做innerHTML了 XXX
 -->